
<template>
    <div class="hello" v-show="ShowArrays[0]">
        <el-input style="width:300px" placeholder="请输入地名地址" clearable v-model="input" class="input-with-select">
        <el-button slot="append" @click="search">查询</el-button>
        </el-input>
        <div class="tableCard" ref="tableCard">
        <el-table
            class="table"
            :data="tableData"
            :show-header='tableHeader'
            :row-style="{cursor: 'pointer'}"
            @row-click='getRow'
            v-loading="loading"
            style="width: 100%">
            <el-table-column
                prop="name"
                label="地名">
            </el-table-column>
            <el-table-column
                prop="value"
                label="地址">
            </el-table-column>
            </el-table>
        </div>
        
    </div>
</template>

<script>
import axios from 'axios'
    import L1 from '../assets/images/L1.png'
    import L2 from '../assets/images/L2.png'
    import L3 from '../assets/images/L3.png'
    import L4 from '../assets/images/L4.png'
    import L5 from '../assets/images/L5.png'
    import L6 from '../assets/images/L6.png'
    import L7 from '../assets/images/L7.png'
    import L8 from '../assets/images/L8.png'
    import L9 from '../assets/images/L9.png'
    import L10 from '../assets/images/L10.png'
    import {mapGoTo}  from '../map/mapHandle'
export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    data(){
        return {
        input:'',
        loading:true,
        list:[],
        tableData:[],
        tableHeader:false
            
        }
    },
    watch:{
        input(newValue){
            if(!newValue.trim()){
                this.$refs.tableCard.style='height:0px'
                this.loading=false
            }
        }
    },
    methods:{
        getRow(row){
            mapGoTo(row.x,row.y,13);
            //清除之前的标记
            window['pointGraphic'].forEach((item)=>{
                // window['view'].graphics.popupTemplate.overwriteActions = true;
                window['view'].graphics.remove(item);
                
            })
            this.heightLine(row);

        },
        // search(){
        //     if(this.input !=''){
        //         window['view'].graphics.remove(window['pointGraphic']);
        //         this.loading=true;
        //         this.$refs.tableCard.style='height:250px';
        //         const GLOBAL_TOKEN = window['TOKEN'];
        //         let val = this.input;
        //         let _this = this;
        //         axios({
        //             method:'GET',
        //             url:`http://10.89.5.191/OneMapServer/rest/services/address_query/Transfer?token=${GLOBAL_TOKEN}&search_word=${val}&result_count=10`
        //         })
        //         .then((res)=>{
        //             let data = res.data.data;
        //             let resData = data.map((item,index)=>{
        //                 //let tmp = {};
        //                 // item.value = (item.address ||  item.verifyName)+'('+item.regionJw+')';
        //                 item.value = (item.address ||  item.verifyName);
        //                 item.type = item.resultType;
        //                 item.address = item.regionJw;
        //                 item.x = item.pointX;
        //                 item.y = item.pointY;
        //                 item.index = index + 1; 
        //                 return item;
        //             })
        //             _this.tableData = resData;
        //             _this.loading=false
        //         })  
        //     }
        // },
        search(){
            if(this.input !=''){
                window['pointGraphic'].forEach((item)=>{
                    window['view'].graphics.remove(item);
                    window['view'].popup.autoOpenEnabled = false;
                })
                
                this.loading=true;
                this.$refs.tableCard.style='height:250px';
                const GLOBAL_TOKEN = window['TOKEN'];
                let val = this.input;
                let _this = this;
                axios({
                    method:'GET',
                    url:`http://10.89.5.191/OneMapServer/rest/services/address_query/Transfer?token=${GLOBAL_TOKEN}&search_word=${val}&result_count=10`
                })
                .then((res)=>{
                    let data = res.data.data;
                    _this.loading=false
                    if(data.length == 0){
                        _this.tableData = [];
                    
                        //空
                    }else{
                        let type =  data[0].resultType;
                        console.log(data);
                        switch(type){
                            case '门牌':
                                _this.tableData = this.MPData(data);
                                break;
                            case 'POI':
                                 _this.tableData = this.POIata(data);
                                break;
                            case '道路':
                                _this.tableData = this.RoadData(data);
                                break;
                            case '道路交叉口':
                                _this.tableData = this.CroData(data);
                                break;
                            default:

                        }
                    }
                })  
            }
        },
        //门牌 ## -> ok
        MPData(data){
            let resultStr = '';
            let tmpItem = {};
            let resData = data.map((item)=>{
                let poistring =""+item.poiString;
                let str1 = poistring.replace(/\//g,'')
                str1=str1.replace(/\\/g,'')
                str1=str1.replace(/[n]/g,',')
                resultStr = str1;
                item.value =  `${item.regionSs}-${item.regionQx}-${item.regionJd}`;
                item.x = item.pointX;
                item.y = item.pointY;
                tmpItem = item;
            })
            let resultArr  = resultStr.split(",");
            let result = resultArr.map((item,index)=>{
                let resItem = JSON.parse(JSON.stringify(tmpItem));
                console.log(resItem,'------');
                resItem.name = item;
                resItem.index = index + 1;
                return resItem;
            })
            console.log(result,'result');
            return result;
        },
        //POI ## -> ok
        POIata(data){
            let resData = data.map((item,index)=>{
                item.name = item.address?`${item.poiString}-${item.address}`:item.poiString;
                item.value = `${item.regionSs}-${item.regionQx}-${item.regionJd}`;
                item.x = item.pointX;
                item.y = item.pointY;
                item.index = index + 1; 
                return item;
            })
            return resData;
        },
        //道路 ## -> ok
        RoadData(data){
            let resData = data.map((item,index)=>{
                item.name = item.verifyName;
                item.value = `${item.regionSs}-${item.regionQx}-${item.regionJd}`;
                item.x = item.pointX;
                item.y = item.pointY;
                item.index = index + 1; 
                return item;
            })
            console.log(resData,'resData');
            return resData;
        },
        //交叉口 
        CroData(data){
            let resData = data.map((item,index)=>{
                item.name = item.roadName1+'-'+item.roadName2+'(路口)';
                item.value = `${item.regionSs}-${item.regionQx}-${item.regionJd}`;
                item.x = item.pointX;
                item.y = item.pointY;
                item.index = index + 1; 
                return item;
            })
            return resData;
        },
        heightLine(obj){
            console.log(obj,'------');
            let Graphic  = window['Graphic'];
            var popupTemplate1 = {
                title: "",
                content: ""
            };
            let tmpStr = `<table>
            <tr>
                <td>类型</td>
                <td>${obj.resultType}</td>
            </tr>
            <tr>
                <td>区县</td>
                <td>${obj.regionQx}</td>
            </tr>
            </table>`;
            popupTemplate1.content = tmpStr;
            popupTemplate1.title = obj.name;
            var point = {
                type: "point",  // autocasts as new Point()
                x: obj.pointX,
                y: obj.pointY,
                // z: 300,
                spatialReference: {
                    wkid: 3857
                }
            };
            let icons = [
                {id:1,icon:L1},
                {id:2,icon:L2},
                {id:3,icon:L3},
                {id:4,icon:L4},
                {id:5,icon:L5},
                {id:6,icon:L6},
                {id:7,icon:L7},
                {id:8,icon:L8},
                {id:9,icon:L9},
                {id:10,icon:L10}
            ];
            let icon = null;
            icons.forEach((item,index)=>{
                if(item.id == obj.index){
                    console.log(item.icon);
                    icon = item.icon;
                }
            })
            var markerSymbol = {
                type: "picture-marker",  // autocasts as new PictureMarkerSymbol()
                url: icon,
                width: "32px",
                height: "32px"
            };

            var pointGraphic = new Graphic({
                geometry: point,
                symbol: markerSymbol,
                popupTemplate: popupTemplate1
            });
            
            console.log(pointGraphic,'pointGraphic');
            window['view'].graphics.add(pointGraphic);
            window['pointGraphic'].push(pointGraphic);
        }
    },
    props:{
            showArrys:{type:Array}
        },
        computed:{
            ShowArrays(){
                return this.$props.showArrys;
            }
        }
}
</script>

<style scoped>
.hello{
    position: fixed;
    width: 300px;
    top: 6%;
    left: 6%;
}
.tableCard{
    position: fixed;
    top: 12%;
    left:6%;
    width: 300px;
    height: 0px;
    overflow-y: auto;
    transition: height 1s;
}
.table{
    border: 1px solid gainsboro;
    box-shadow: gainsboro 50px;
}
</style>
